import React, { useEffect } from 'react';
import {
  Form,
  Button,
  Space,
  Row,
  Col,
  Alert,
  InputNumber,
  Typography,
  Descriptions
} from 'antd';
import { SaveOutlined } from '@ant-design/icons';

const { Title } = Typography;

const RulesConfigForm = ({ rules, isSubmitting, onSubmit }) => {
  const [form] = Form.useForm();

  // 设置表单初始值
  useEffect(() => {
    if (rules) {
      form.setFieldsValue({
        epsilonValue: rules.epsilonValue,
        normRatio: rules.normRatio,
        deltaValue: rules.deltaValue,
        maxDownloadRatio: rules.maxDownloadRatio
      });
    }
  }, [rules, form]);

  const handleFinish = (values) => {
    onSubmit(values);
  };

  const handleReset = () => {
    if (rules) {
      form.setFieldsValue({
        epsilonValue: rules.epsilonValue,
        normRatio: rules.normRatio,
        deltaValue: rules.deltaValue,
        maxDownloadRatio: rules.maxDownloadRatio
      });
    }
  };

  // 添加按钮点击调试
  const handleSubmitClick = () => {
    form.submit();
  };

  const handleResetClick = () => {
    handleReset();
  };

  return (
    <div>
      <Alert
        message="规则配置说明"
        description={
          <div>
            <p>这些参数用于控制网络中的下载和上传行为：</p>
            <ul style={{ marginBottom: 0 }}>
              <li><strong>ε值：</strong>防止分母为零的小正数，范围 0.001-0.1</li>
              <li><strong>标准比例：</strong>标准下载/上传比例，范围 0.2-5.0</li>
              <li><strong>δ值：</strong>最小贡献度补偿，范围 0.001-0.1</li>
              <li><strong>最大下载比例：</strong>允许的最大下载/上传比例，范围 1.0-10.0</li>
            </ul>
          </div>
        }
        type="info"
        className="rules-alert"
        showIcon
      />

      {rules && (
        <div className="rules-status">
          <Title level={5}>当前规则状态</Title>
          <Descriptions bordered size="small" column={2}>
            <Descriptions.Item label="最后更新时间">
              {new Date(rules.updatedAt).toLocaleString('zh-CN')}
            </Descriptions.Item>
            <Descriptions.Item label="更新者">
              {rules.updatedByUsername}
            </Descriptions.Item>
          </Descriptions>
        </div>
      )}

      <Form
        form={form}
        layout="vertical"
        onFinish={handleFinish}
      >
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              label="ε值"
              name="epsilonValue"
              rules={[
                { required: true, message: '请输入ε值' },
                { type: 'number', min: 0.001, max: 0.1, message: 'ε值范围为 0.001-0.1' }
              ]}
            >
              <InputNumber
                min={0.001}
                max={0.1}
                step={0.001}
                precision={3}
                style={{ width: '100%' }}
                placeholder="输入ε值"
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="标准比例"
              name="normRatio"
              rules={[
                { required: true, message: '请输入标准比例' },
                { type: 'number', min: 0.2, max: 5.0, message: '标准比例范围为 0.2-5.0' }
              ]}
            >
              <InputNumber
                min={0.2}
                max={5.0}
                step={0.1}
                precision={1}
                style={{ width: '100%' }}
                placeholder="输入标准比例"
              />
            </Form.Item>
          </Col>
        </Row>

        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              label="δ值"
              name="deltaValue"
              rules={[
                { required: true, message: '请输入δ值' },
                { type: 'number', min: 0.001, max: 0.1, message: 'δ值范围为 0.001-0.1' }
              ]}
            >
              <InputNumber
                min={0.001}
                max={0.1}
                step={0.001}
                precision={3}
                style={{ width: '100%' }}
                placeholder="输入δ值"
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="最大下载比例"
              name="maxDownloadRatio"
              rules={[
                { required: true, message: '请输入最大下载比例' },
                { type: 'number', min: 1.0, max: 10.0, message: '最大下载比例范围为 1.0-10.0' }
              ]}
            >
              <InputNumber
                min={1.0}
                max={10.0}
                step={0.1}
                precision={1}
                style={{ width: '100%' }}
                placeholder="输入最大下载比例"
              />
            </Form.Item>
          </Col>
        </Row>

        <Form.Item className="form-actions">
          <Space>
            <Button 
              type="primary" 
              size="large"
              icon={<SaveOutlined />}
              loading={isSubmitting}
              className="submit-btn"
              onClick={handleSubmitClick}
            >
              保存规则配置
            </Button>
            <Button 
              size="large" 
              onClick={handleResetClick}
              disabled={isSubmitting}
              className="reset-btn"
            >
              重置
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </div>
  );
};

export default RulesConfigForm;